@use '@angular/material/core/tokens/token-utils';
@use '@angular/material/core/style/sass-utils';

// The prefix used to generate the fully qualified name for tokens in this file.
$prefix: (ngm, shell);

@function get-unthemable-tokens() {
  @return (
  );
}

@function get-color-tokens() {
  @return (
    bg-color: var(--ngm-color-surface-container),
    primary-container-bg-color: var(--ngm-color-surface-container),
    copilot-bg-color: var(--ngm-color-surface),
  );
}

@function get-token-slots() {
  @return sass-utils.deep-merge-all(
    get-unthemable-tokens(),
    get-color-tokens(),
  );
}

@include token-utils.use-tokens($prefix, get-token-slots()) {
  .mat-toolbar.pac__shell-bar {
    --mat-toolbar-container-background-color: var(#{token-utils.get-token-variable(bg-color)});
  }
  :host {
    --mat-sidenav-content-background-color: var(#{token-utils.get-token-variable(primary-container-bg-color)});
    --ngm-copilot-bg-color: var(#{token-utils.get-token-variable(copilot-bg-color)});
  }

  .pac-features__sidenav {
    --mat-sidenav-container-background-color: var(#{token-utils.get-token-variable(bg-color)});
  }
}

:host {
  --mat-sidenav-container-divider-color: transparent;
  @include token-utils.create-token-values($prefix, get-token-slots());

  flex: 1;
  height: 100%;
  max-width: 100%;
}

.mat-sidenav.pac-features__sidenav {
  &.mat-drawer-over {
    --mat-sidenav-container-width: 260px;
  }
  &.mat-drawer-side {
    --mat-sidenav-container-width: 58px;
    @apply duration-200 ease-in-out;
    transition: width;
  }
}

.pac_brand {
  display: flex;
  align-items: center;

  span {
    white-space: nowrap;
  }
}

.pac-auth-button.mat-mdc-button-base {
  --mdc-icon-button-icon-size: 100%;
  .avatar {
    max-width: 100%;
    height: auto;
  }
}

.pac_sidenav-content {
  z-index: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mat-drawer-container.pac-fullscreen {
  z-index: 2;
  & > .mat-drawer-content {
    z-index: 3;
  }
}

.pac-home-title {
  background: linear-gradient(-45deg, #5d55f4, #00ff95, #5d55f4);
	background-size: 200%;
  background-position: 80% 50%;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  cursor: pointer;

  &:hover {
    animation: animated_text 3s ease-in-out infinite;
    -moz-animation: animated_text 3s ease-in-out infinite;
    -webkit-animation: animated_text 3s ease-in-out infinite;
  }
}

@keyframes animated_text {
  0% {
    background-position: 80% 50%;
  }
  50% {
    background-position: 180% 50%;
  }
  100% {
    background-position: 280% 50%;
  }
}

.pac-router__progress-bar {
  position: absolute;
  height: 2px;
}

.pac__toolbar-new {
  @apply rounded-md m-2;
}

emoji-avatar.copilot-thinking {
  @apply border-2 animate-twinkling-slow;
}

.pac-copilot-trigger.active {
  @apply shadow-lg bg-components-card-bg;
}

::ng-deep {
  .pac-toolbar-search__autocomplete.mat-mdc-autocomplete-panel {
    @apply relative mt-2 max-h-[456px] min-w-[240px];
  }

  .pac-features__sidenav {
    .mat-drawer-inner-container {
      @apply flex flex-col overflow-hidden;
    }
  }
}
